<!--
 * @Descripttion: 酒店启用/停用
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-04-28 14:36:26
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-27 16:48:35
-->
<template>
  <KiFormDialog
    v-if="hotelName"
    :show.sync="row.show"
    v-model="row.data"
    class="dialog-channel"
    :title="'酒店' + ['启用', '停用'][status]"
    :before-close="()=>{ $emit('clearHotelId') }">
    <div v-loading="row.loading" class="mb40">
      <el-alert
        class="mb40"
        :title="hotelName"
        type="warning"
        :closable="false"
        center />
        <div class="step">
          <span class="step-box info" :class="{'success': stepList[index]}" v-for="item, index in listOfStep" :key="index">
            <span v-if="stepList[index]" class="el-icon-check"></span> 
            <span v-else>{{ index + 1 }}</span>
            <span>{{ item }}</span>
          </span>
        </div>
    </div>
    <div slot="footer" style="text-align: end;" v-show="!row.loading">
      <el-button @click="$emit('clearHotelId')">取消</el-button>
      <el-button v-if="stepList[0] && stepList[1] && stepList[2] && !stepList[3]" type="primary" @click="updateStatus">启用{{ stepList[4] }}</el-button>
      <el-button v-if="stepList[3]" type="primary" @click="updateStatus">停用</el-button>
    </div>
  </KiFormDialog>

</template>

<script>
export default {
  name: 'Channel',
  props: {
  },
  watch: {
    '$attrs.id': {
      handler: function(newID) {
        if (newID) {
          this.hotelId = newID
          this.row.loading = true
          this.row.show = true
          this.queryForDetail()
          this.queryStatusListForUpdateStatus()
        }
      },
      immediate: true
    },
  },
  data () {
    return {
      hotelId: null,
      row: {
        show: false,
        loading: false,
        data: {},
      },
      hotelName: '',
      status: 0,
      stepList: [false, false, false , false],
      listOfStep: ['创建酒店', '创建房型', '创建产品计划', '启用酒店'],
    }
  },
  methods: {
    queryStatusListForUpdateStatus() {
      this.$POST('sot-admin-api/hotel/self-employed/queryStatusListForUpdateStatus', { 'id': this.hotelId }).then(_ => {
        this.stepList = _.data
      }).finally(_ => {
        setTimeout(_ => {
          this.row.loading = false
        }, 500)
      }).catch(_ => {
        this.stepList = [false, false, false , false]
      })
    },
    queryForDetail() {
      this.$POST('sot-admin-api/hotel/self-employed/queryForDetail', { 'id': this.hotelId }).then(_ => {
        this.hotelName = _.data?.hotelName
        this.status = _.data?.status
      }).catch(_ => {
        this.hotelName = ''
        this.status = 0
      })
    },
    updateStatus() {
      this.$POST('sot-admin-api/hotel/self-employed/updateStatus', {'id': this.hotelId, status: this.status^1}).then(_ => {
        this.$swal.success(_.message)
      }).finally(_ => {
        this.$emit('refresh')
        this.$emit('clearHotelId')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.dialog-channel) {
  .el-alert__title{
    font-size: 15px;
  }
}
// 自定义步骤条样式开始
.step-box{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  color: #c0c4cc;
  &::after{
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    content: '';
    height: 2px;
    background: #c0c4cc;
  }
  span:nth-child(1){
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid;
    margin-bottom: 10px;
    background: #fff;
    z-index: 1
  }
  span:nth-child(2){
    font-size: 16px;
    font-weight: 700;
  }
}
.step{
  display: flex;
  justify-content: space-around;
  .step-box:first-child{
    &::after{
      left: 50%;
    }
  }
  .step-box:last-child{
    &::after{
      right: 50%;
    }
  }
}
.info{
  color: #c0c4cc;
  &:span:nth-child(1){
    border-color: #c0c4cc;
  }
}
.success{
  color: #67c23a;
  &:span:nth-child(1){
    border-color: #67c23a;
  }
}
.el-icon-check:before {
    font-weight: 700;
}
// 自定义步骤条样式结束
</style>
